<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.nav {
			width: 50px;
			position: absolute;
			top: 20px;
			left: 0;
		}
		
		.wrap {
			position: absolute;
			width: 950px;
			height: 500px;
			overflow: hidden;
			top: 20px;
			left: 50px;
		}

		#card1 .model1,
        #card1 .model2,
        #card1 .model3,
        #card1 .model4 {
            border: 2px solid #D7D7D7;
        }
        #card1 .model1 {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 800px;
            height: 350px;
        }
        #card1 .model2 {
            position: absolute;
            top: 0px;
            left: 810px;
            width: 135px;
            height: 350px;
        }
        #card1 .model3{
            position: absolute;
            left: 0px;
            top: 362px;
            width: 800px;
            height: 135px;
        }
        #card1 .model4{
            position: absolute;
            left: 810px;
            top: 362px;
            width: 135px;
            height: 135px;
        }

        #card1 .icon {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            display: block;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        #card1 .button{
            background: none;
            border: 0;
            cursor: pointer;
        }
        #card1 .button span {
            color: #000;
            font-size: 14px;
            font-weight: bold;
        }

        #card1 .btn1 {
            position: absolute;
            top: 10px;
            left: 30px;
        }
        #card1 .btn1 .icon{
            background-image: url('${cxt}/static/portal/btn1.png');
        }
        #card1 .btn2 {
            position: absolute;
            top: 150px;
            left: 30px;
        }
        #card1 .btn2 .icon{
            background-image: url('${cxt}/static/portal/btn2.png');
        }
        #card1 .btn3 {
            position: absolute;
            top: 280px;
            left: 30px;
        }
        #card1 .btn3 .icon{
            background-image: url('${cxt}/static/portal/btn3.png');
        }
        #card1 .btn4 {
            position: absolute;
            top: 70px;
            left: 210px;
        }
        #card1 .btn4 .icon{
            background-image: url('${cxt}/static/portal/btn4.png');
        }
        #card1 .btn5 {
            position: absolute;
            top: 230px;
            left: 210px;
        }
        #card1 .btn5 .icon{
            background-image: url('${cxt}/static/portal/btn5.png');
        }
        #card1 .btn6 {
            position: absolute;
            top: 10px;
            left: 380px;
        }
        #card1 .btn6 .icon{
            background-image: url('${cxt}/static/portal/btn6.png');
        }
        #card1 .btn7 {
            position: absolute;
            top: 10px;
            left: 550px;
        }
        #card1 .btn7 .icon{
            background-image: url('${cxt}/static/portal/btn7.png');
        }
        #card1 .btn8 {
            position: absolute;
            top: 10px;
            left: 700px;
        }
        #card1 .btn8 .icon{
            background-image: url('${cxt}/static/portal/btn8.png');
        }
        #card1 .btn9 {
            position: absolute;
            top: 150px;
            left: 380px;
        }
        #card1 .btn9 .icon{
            background-image: url('${cxt}/static/portal/btn6.png');
        }
        #card1 .btn10 {
            position: absolute;
            top: 150px;
            left: 550px;
        }
        #card1 .btn10 .icon{
            background-image: url('${cxt}/static/portal/btn8.png');
        }

        #card1 .btn11 {
            position: absolute;
            top: 150px;
            left: 700px;
        }
        #card1 .btn11 .icon{
            background-image: url('${cxt}/static/portal/btn11.png');
        }
        #card1 .btn12 {
            position: absolute;
            top: 280px;
            left: 380px;
        }
        #card1 .btn12 .icon{
            background-image: url('${cxt}/static/portal/btn6.png');
        }
        #card1 .btn13 {
            position: absolute;
            top: 280px;
            left: 550px;
        }
        #card1 .btn13 .icon{
            background-image: url('${cxt}/static/portal/btn13.png');
        }
        #card1 .btn14 {
            position: absolute;
            top: 280px;
            left: 700px;
        }
        #card1 .btn14 .icon{
            background-image: url('${cxt}/static/portal/btn14.png');
        }
        #card1 .btn15 {
            position: absolute;
            top: 10px;
            left: 40px;
        }
        #card1 .btn15 .icon{
            background-image: url('${cxt}/static/portal/btn15.png');
        }
        #card1 .btn16 {
            position: absolute;
            top: 150px;
            left: 40px;
        }
        #card1 .btn16 .icon{
            background-image: url('${cxt}/static/portal/btn16.png');
        }
        #card1 .btn17 {
            position: absolute;
            top: 280px;
            left: 40px;
        }
        #card1 .btn17 .icon{
            background-image: url('${cxt}/static/portal/btn15.png');
        }
        #card1 .btn18 {
            position: absolute;
            top: 30px;
            left: 30px;
        }
        #card1 .btn18 .icon{
            background-image: url('${cxt}/static/portal/btn18.png');
        }
        #card1 .btn19 {
            position: absolute;
            top: 30px;
            left: 380px;
        }
        #card1 .btn19 .icon{
            background-image: url('${cxt}/static/portal/btn19.png');
        }
        #card1 .btn20 {
            position: absolute;
            top: 30px;
            left: 700px;
        }
        #card1 .btn20 .icon{
            background-image: url('${cxt}/static/portal/btn20.png');
        }
        #card1 .btn21 {
            position: absolute;
            top: 30px;
            left: 40px;
        }
        #card1 .btn21 .icon{
            height: 52px;
            background-image: url('${cxt}/static/portal/btn21.png');
        }
        #card1 .arrow1 {
            background-image: url('${cxt}/static/portal/1.png');
            display: block;
            width: 65px;
            height: 174px;
            position: absolute;
            top: 90px;
            left: 120px;
        }
        #card1 .arrow2 {
            background-image: url('${cxt}/static/portal/2.png');
            display: block;
            width: 16px;
            height: 52px;
            position: absolute;
            top: 150px;
            left: 228px;
        }
        #card1 .arrow3 {
            background-image: url('${cxt}/static/portal/3.png');
            background-size: 100%;
            display: block;
            width: 55px;
            height: 320px;
            position: absolute;
            top: 20px;
            left: 290px;
        }
        #card1 .arrow4 {
            background-image: url('${cxt}/static/portal/4.png');
            display: block;
            width: 38px;
            height: 16px;
            position: absolute;
            top: 30px;
            left: 475px;
        }
        #card1 .arrow5 {
            background-image: url('${cxt}/static/portal/4.png');
            display: block;
            width: 38px;
            height: 16px;
            position: absolute;
            top: 30px;
            left: 635px;
        }
        #card1 .arrow6 {
            background-image: url('${cxt}/static/portal/4.png');
            display: block;
            width: 38px;
            height: 16px;
            position: absolute;
            top: 170px;
            left: 475px;
        }
        #card1 .arrow7 {
            background-image: url('${cxt}/static/portal/4.png');
            display: block;
            width: 38px;
            height: 16px;
            position: absolute;
            top: 170px;
            left: 635px;
        }
        #card1 .arrow8 {
            background-image: url('${cxt}/static/portal/4.png');
            display: block;
            width: 38px;
            height: 16px;
            position: absolute;
            top: 300px;
            left: 475px;
        }
        #card1 .arrow9 {
            background-image: url('${cxt}/static/portal/4.png');
            display: block;
            width: 38px;
            height: 16px;
            position: absolute;
            top: 300px;
            left: 635px;
        }
        #card1 .arrow10 {
            background-image: url('${cxt}/static/portal/5.png');
            background-size: 100%;
            display: block;
            width: 10px;
            height: 77px;
            position: absolute;
            top: 70px;
            left: 68px;
        }
        #card1 .arrow11 {
            background-image: url('${cxt}/static/portal/5.png');
            background-size: 100%;
            display: block;
            width: 9px;
            height: 69px;
            position: absolute;
            top: 209px;
            left: 68px;
        }

        #card1 .arrow12 {
            background-image: url('${cxt}/static/portal/6.png');
            background-size: 100%;
            display: block;
            width: 175px;
            height: 15px;
            position: absolute;
            top: 53px;
            left: 150px;
        }
        #card1 .arrow13 {
            background-image: url('${cxt}/static/portal/6.png');
            background-size: 100%;
            display: block;
            width: 175px;
            height: 15px;
            position: absolute;
            top: 53px;
            left: 490px;
        }
	</style>
</head>
<body>
	<div class="nav">
		<button>模块1</button>
		<button>模块2</button>
		<button>模块3</button>
	</div>
	<div class="wrap">
		<div id="card1" class="card">
			<div class="model1">
				<button class="button btn1">
	                <i class="icon"></i>
	                <span>接口订单</span>
	            </button>
	            <button class="button btn2">
	                <i class="icon"></i>
	                <span>手工订单</span>
	            </button>
	            <button class="button btn3">
	                <i class="icon"></i>
	                <span>批量订单</span>
	            </button>
	            
	            <div class="arrow1"></div>

	            <button class="button btn4">
	                <i class="icon"></i>
	                <span>接单</span>
	            </button>

	            <div class="arrow2"></div>
	            
	            <button class="button btn5">
	                <i class="icon"></i>
	                <span>预约</span>
	            </button>
	            
	            <div class="arrow3"></div>

	            <button class="button btn6">
	                <i class="icon"></i>
	                <span>提货调度</span>
	            </button>
	            <div class="arrow4"></div>
	            <button class="button btn7">
	                <i class="icon"></i>
	                <span>提货</span>
	            </button>
	            <div class="arrow5"></div>
	            <button class="button btn8">
	                <i class="icon"></i>
	                <span>提货完成</span>
	            </button>

	            <button class="button btn9">
	                <i class="icon"></i>
	                <span>配送调度</span>
	            </button>
	            <div class="arrow6"></div>
	            <button class="button btn10">
	                <i class="icon"></i>
	                <span>送货</span>
	            </button>
	            <div class="arrow7"></div>
	            <button class="button btn11">
	                <i class="icon"></i>
	                <span>送货签收</span>
	            </button>
	            
	            <button class="button btn12">
	                <i class="icon"></i>
	                <span>安装调度</span>
	            </button>
	            <div class="arrow8"></div>
	            <button class="button btn13">
	                <i class="icon"></i>
	                <span>安装</span>
	            </button>
	            <div class="arrow9"></div>
	            <button class="button btn14">
	                <i class="icon"></i>
	                <span>安装签收</span>
	            </button>
	        </div>
        
	        <div class="model2">
	            <button class="button btn15">
	                <i class="icon"></i>
	                <span>提报异常</span>
	            </button>
	            <div class="arrow10"></div>
	            <button class="button btn16">
	                <i class="icon"></i>
	                <span>异常接收</span>
	            </button>
	            <div class="arrow11"></div>
	            <button class="button btn17">
	                <i class="icon"></i>
	                <span>异常处理</span>
	            </button>
	        </div>

	        <div class="model3">
	            <button class="button btn18">
	                <i class="icon"></i>
	                <span>回单接收</span>
	            </button>
	            <div class="arrow12"></div>
	            <button class="button btn19">
	                <i class="icon"></i>
	                <span>回单寄出</span>
	            </button>
	            <div class="arrow13"></div>
	            <button class="button btn20">
	                <i class="icon"></i>
	                <span>回单回收</span>
	            </button>
	        </div>

	        <div class="model4">
	            <button class="button btn21">
	                <i class="icon"></i>
	                <span>订单作废</span>
	            </button>
	        </div>
		</div>
		<div id="card2" class="card"></div>
		<div id="card3" class="card"></div>
	</div>
	
</body>
</html>